<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客修改</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="js/urltools.js"> </script>
    <script src="js/logout.js"></script>

<body>
    <!--导航栏-->
    <div class="nav">
        <!--头像-->
        <img src="css/cat.jpg" alt="">
        <span>博客系统</span>
        <!--使用空白元素，进行占位-->
        <div class="spaner">
            <span> </span>
        </div>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">退出</a>
    </div>
    <!-- 包裹整个博客编辑页内容的顶级容器 -->
    <div class="blog-edit-container">
            <div class="title">
                <input type="text" placeholder="在此处输入标题" id= "title">
                <button id="submit" onclick="mysub()">发布文章</button>
            </div>
            <!-- 放置 md 编辑器 -->
            <div id="editorDiv">
            <textarea name="content" style="display:none"></textarea>
            </div>
    </div>

    <script>
        var editor;
        var id=0;
        var isSubmit=1;
        function initEdit(md){
        // 初始化编辑器
            editor = editormd("editorDiv", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: md,
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/",
            //editor.md会自动把用户再编译器输入的内容保存到textarea这个多行编辑框中。
            saveHTMLToTextarea: true,
        });
    }
     //查询当前的文章进行展示
     function showarticle(){
        id= getParamByKey("id")
        if(id==null || id <=0){
            isSubmit=0;
            alert("该用户下查询不到该文章");
            return false;
        }
        jQuery.ajax({
            url:"art/getDetailById",
            type:"post",
            data:{
                "id":id
            },
            success:function(res){
                if(res.code==200 && res.data.id>0 && res.data!=null){
                    //文章查询成功
                    jQuery("#title").val(res.data.title);
                    initEdit(res.data.content);
                }else{
                    isSubmit=0;
                    alert("该用户下查询不到该文章")
                }
            }
            
        });
     }
     showarticle();
     //提交修改操作
     function mysub(){
        if(isSubmit==0){
            alert("请刷新页面，重新尝试")
            return false;
        }
        //非空判断
        var title=jQuery("#title");
        var content=editor.getValue();
        if(title==null||title.val().trim()==""){
            alert("请输入标题");
            title.focus();
            return false;
        }
        if(content==null){
            alert("请输入正文");
            content.focus();
            return false;
        }
        //将数据传到后端去
        jQuery.ajax({
            url:"/art/update",
            type:"post",
            data:{
                "id":id,
                "title":title.val(),
                "content":content
            },
            success:function(res){
                if(res.code==200 && res.data==1){
                    alert("修改成功");
                    location.href="blog_list.html";
                }else{
                    alert("修改失败，请重新操作")
                }
            }

        });
     }
    </script>
</body>

</html>